package com.ikapp.jetpackcomposeuidemo.weiget

import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.ikapp.jetpackcomposeuidemo.R
import java.io.StringReader

/**
 *  ANDROID STUDIO - VERSION
 *  createTime: 2024/1/12 23:15
 *  Author: Ikun
 *  email: jikunwei41@gmail.com
 *  Surface 从字面上来理解，是一个平面，在 Material Design 设计准则中也同样如此，
 *  我们可以将很多的组件摆放在这个平面之上，
 *  我们可以设置这个平面的边框，圆角，颜色等等。接下来，我们来用 Surface 组件做出一些不同的效果。
 **/

@Composable
@Preview(showBackground = true)
fun ShowSurface() {
    surface()
}

@Composable
fun surface(modifier: Modifier = Modifier) {
    Surface(
        shape = RoundedCornerShape(8.dp),
        shadowElevation = 10.dp,
        modifier = modifier
            .width(300.dp)
            .height(100.dp)
    ) {
        Row(
            modifier = modifier
                .clickable { }
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_launcher_background),
                contentDescription = stringResource(id = R.string.tv_Hello),
                modifier = modifier
                    .size(100.dp),
                contentScale = ContentScale.Crop
            )
            Spacer(modifier = modifier.padding(horizontal = 12.dp))
            Column(
                modifier = Modifier.fillMaxHeight(),
                verticalArrangement = Arrangement.Center
            ) {
                Text(
                    text = "你好啊",
                    style = MaterialTheme.typography.bodyMedium
                )
                Spacer(modifier = Modifier.padding(vertical = 16.dp))
                Text(text = "Ik")
            }
        }
    }
}
